<link rel="stylesheet" href="{{base_url()}}syslib/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.selection.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.filter.js"></script>		
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdata.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxlistbox.js"></script>	
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/gettheme.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/globalization/jquery.global.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="{{base_url()}}syslib/jqwidgets/jqxnumberinput.js"></script>
{{$controller = $smarty.const.CCTRL}}
{{$token = $smarty.const.TOKEN}}
<div class="pr2 frmjqxgrid">
    <div class="grid_x">
        <div id="jqxGrid"></div>
    </div>
</div>
<script type="text/javascript">
    function updateCol(col,ID,Value){
        var url,data;
        url="{{base_url()}}APanel/fe548e5a964095e7c80cd8d3721be2ef/columnUpdate/6e45f08d08d1eab290b6a7c9cfd34fa9/{{$controller}}/"+col;
        data={
            ID      :   ID,
            Value   :   Value
        }
        isrunning=true;
        jqxAjax(url,data,function(result){
            isrunning=false;
            if(result.code>=0){

            }else{
                tipMessage(result.msg);
                //ShowNoticeDialogMessage(result.msg);
            }
        });
    }
    var myjqxGrid= (function () {
        var myGrid=$("#jqxGrid");
        var theme=getTheme();
        var source ={
            datatype: "json",
            type        :   "POST",
            datafields  : [
                { name: 'ID', type: 'int' },
                { name: 'Name', type: 'string' },
                { name: 'Keyword', type: 'string' },
                { name: 'Note', type: 'string' }
            ],
            url         : '{{base_url()}}APanel/authority/jqgrid_data/',
            filter      : function(){ 
                myGrid.jqxGrid('updatebounddata', 'filter') 
            },
            sort        : function(){ 
                myGrid.jqxGrid('updatebounddata') 
            },
            root        : 'Rows',
            beforeprocessing: function(data){		
                    source.totalrecords = data[0].TotalRows;					
            }
        };	
        var dataadapter = new $.jqx.dataAdapter(source, {
            loadError: function(xhr, status, error){
                tipMessage("<b>Status</b>:"+xhr.status+"<br/><b>ThrownError</b>:"+error+"<br/>");
            }
        });
        var columns=[
            { text: 'Mã', datafield: 'ID', width: 80,editable:false},
            { text: 'Quyền', datafield: 'Name',editable:true},
            { text: 'Từ khóa', datafield: 'Keyword',editable:true },
            { text: 'Ghi chú', datafield: 'Note',editable:true }
        ];
        //Adding event listeners
        function _addEventListeners() {
            $("#jqxGrid").bind('cellendedit', function (event) {
                try{
                    var args = event.args;
                    var Column = args.datafield ,Row = args.rowindex,Value = args.value;
                    var Data=$("#jqxGrid").jqxGrid('getrowdata', Row);
                    var ID=Data.ID;
                    if(ID==undefined || ID==""){
                        return;
                    }
                    switch(Column){
                        case "Keyword":
                        case "Note":
                        case "Name":
                            if(args.oldvalue!=args.value){
                                updateCol(Column,ID,args.value);
                            }
                            break;
                        default:
                        tipMessage("Unkown this cell. Maybe 'editable' of this colums is 'off'"); 
                    }
                }catch(e){
                    tipMessage(e.message);
                    console.log("Error:"+e.message);
                }
            });
            
        };
        //Creating all page elements which are jqxWidgets
        function _createElements() {

        };
        //Creating the demo window
        function _createWindow() {
            
        };
        function _createGrid(){
            try{
                var gridconfig={
                    width:'720px',
                    source: dataadapter,
                    theme: theme,
                    sortable: true,
                    rendergridrows: function(obj)
                    {
                        return obj.data;    
                    },
                    editable:true,
                    editmode:'dblclick',
                    //selectionmode:'multiplerowsextended',
                    height:'500',
                    //virtualmode: true,
                    columns: columns,
                    pageable :    false
                };
                myGrid.jqxGrid(gridconfig);
                //handleEvent_jqxGrid(myGrid);
            }catch(e){ tipMessage(e.message); }
        }
        return {
            Init:function(){
                _createGrid();
                _addEventListeners();
                
            },
            Refresh:function(){
                console.log("Refresh ↵ Call");
                myGrid.jqxGrid('updatebounddata');
            }
        }
    } ());
    $(document).ready(function () {
        myjqxGrid.Init();
    });
</script>
<style>
    #jqxGrid,#jqxGrid *{
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
        font-family: tahoma;
        font-size: 11px;
    }
    .jqx-widget-content,.jqx-calendar-footer{
        font-family: tahoma;font-size: 11px;line-height: 16px
    }
</style>